<template>
  <el-dialog
    :visible.sync="dialog"
    destroy-on-close
    title="产品信息"
    width="60%"
    top="75px"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <div class="app-container" v-loading="loading">
      <vxe-form
        :data="formData"
        @submit="onSearchBtnClick"
        @reset="onSearchBtnClick"
      >
        <vxe-form-item
          field="name"
          :item-render="{
            name: 'input',
            attrs: { placeholder: '请输入产品分类搜索' },
          }"
        />
        <vxe-form-item
          field="name"
          :item-render="{
            name: 'input',
            attrs: { placeholder: '请输入产品名称搜索' },
          }"
        />
        <vxe-form-item>
          <template #default>
            <el-button type="primary" size="small" @click="closeDialog"
              >查询</el-button
            >
            <el-button plain size="small" @click="closeDialog">重置</el-button>
          </template>
        </vxe-form-item>
      </vxe-form>
      <vxe-table
        ref="table"
        border
        size="mini"
        resizable
        align="left"
        show-overflow
        show-header-overflow
        highlight-current-row
        :data="tableData"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-table-column type="checkbox" width="50" align="center" />
        <vxe-table-column field="name" title="产品名称" width="150px" />
        <vxe-table-column field="code" title="产品编码" width="130px" />
        <vxe-table-column
          field="specification"
          title="产品规格"
          width="150px"
        />
        <vxe-table-column field="unit" title="单位" width="80px" />
        <vxe-table-column field="otherInfo" title="其他属性" width="130px" />
      </vxe-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeDialog" plain>取消</el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="!multipleSelection.length"
        @click="onSearchBtnClick"
        >选中</el-button
      >
    </div>
  </el-dialog>
</template>
// import { formatterNum } from "@/utils/index";
<script>
export default {
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 10,
      },
      dialog: false,
      tableData: [],
      multipleSelection: [],
      detail: null,
      total: 0,
      data: [],
      param: {},
      checked: [],
      data: {
        total: 2,
        list: [
          {
            id: '1',
            code: 'P20220122011',
            name: '螺纹钢',
            specification: 'Φ80mm',
            unit: '吨',
            comment: '',
            otherInfo: '重量单位：吨，长/直径单位：mm',
          },
          {
            id: '2',
            code: 'P20220122012',
            name: '镀锌钢板',
            specification: '60mm',
            unit: '吨',
            comment: '',
            otherInfo: '重量单位：吨，长宽高单位：mm',
          },
          {
            id: '1',
            code: 'TDA3-90',
            name: '裙房第9层钢筋桁架楼承板',
            specification: 'TD1-70',
            unit: '件',
            comment: '',
            otherInfo:
              '板编号：9A2、型号：TD6-170、长度：6775mm、宽度：600mm，高度：105mm',
          },
          {
            id: '2',
            code: 'P20220123002',
            name: '五段梁箍',
            specification: 'C6',
            unit: '件',
            otherInfo: '编号：10000、直径级别：C10、边角结构：3950,0',
            comment: '',
          },
        ],
      },
    }
  },
  watch: {
    isShow: function () {
      this.$emit('input', null)
    },
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    //CheckBox勾选
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    //formatterNum,
    onSearchBtnClick() {
      // this.loading = true;
      // coalEnters(this.formData).then(data => {

      this.tableData = this.data.list
      this.total = this.data.total
      // this.loading = false;
      // });
    },

    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    closeDialog() {
      this.$emit('closeDialog')
    },

    onChangeEnable($event, id) {},
  },
}
</script>

<style scoped></style>
